<template>
  <el-row :gutter="24" class="pl-4 pr-4">
    <el-col :span="6">
      <info />
    </el-col>
    <el-col :span="18">
      <main-box>
        <PlusSearch
          v-model="queryform"
          :columns="formConfig"
          :show-number="2"
          label-width="80"
          label-position="right"
          class="mb-xs"
          @search="initData()"
          @reset="handleRest()"
        >
          <template #plus-field-type>
            <el-radio-group v-model="queryform.type">
              <el-radio-button label="全部" :value="-1" />
              <el-radio-button label="借出" :value="1" />
              <el-radio-button label="归还" :value="2" />
            </el-radio-group>
          </template>
        </PlusSearch>
        <PureTable
          ref="tableRef"
          border
          adaptive
          :loading="loading"
          :data="tableData"
          :columns="columns"
          :pagination="pagination"
          @page-size-change="initData()"
          @page-current-change="initData(false)"
        />
      </main-box>
    </el-col>
  </el-row>
</template>

<script setup lang="tsx">
import { ref } from "vue";
import { useTableConfig } from "@/utils/tableConfig";
import { type PlusColumn, PlusSearch } from "plus-pro-components";

import { useRoute } from "vue-router";
import { listByUserApi } from "@/api/statistics/staff";
import info from "./modules/info.vue";
import { diffDate } from "@/utils";
import dayjs from "dayjs";

const route = useRoute();

/* 查询表单 */
const formConfig: PlusColumn[] = [
  {
    label: "类型",
    prop: "type"
  },
  {
    label: "查询",
    prop: "searchValue",
    fieldProps: {
      placeholder: "物件编号/物件名称/物件型号"
    }
  }
];
const queryform = ref({ type: -1, searchValue: "" });
const handleRest = () => {
  initData(true);
  queryform.value.type = -1;
};

const getQueryParam = () => {
  const params = { ...queryform.value, userId: route.query.userId } as any;
  params.type = params.type > 0 ? params.type : "";
  return params;
};
/* 表格数据 */
const { pagination } = useTableConfig();
const tableData = ref([]);
const loading = ref(false);
const columns = [
  {
    label: "物件图片",
    prop: "picUrl",
    cellRenderer: ({ row }) => {
      const { picUrl } = row.tool;
      let list = [];
      if (picUrl) {
        list = picUrl.split(",");
      }
      return list.map((item, index) => {
        return (
          <el-image
            src={item}
            width={50}
            initial-index={index}
            preview-src-list={list}
            preview-teleported={true}
          />
        );
      });
    }
  },
  { label: "物件编号", prop: "tool.code" },
  { label: "物件名称", prop: "tool.name" },
  { label: "分类", prop: "tool.toolCategoryName" },
  { label: "物件型号", prop: "tool.modelName" },
  { label: "标签编号", prop: "tool.labelCode" },
  { label: "存放位置", prop: "tool.storageLocation" },
  {
    label: "事件类型",
    prop: "type",
    cellRenderer: ({ row }) => {
      const { type } = row;
      const col = type == 1 ? "warning" : "success";
      const txt = type == 1 ? "借出" : "归还";
      return <el-tag type={col}>{txt}</el-tag>;
    }
  },
  {
    label: "使用时长",
    prop: "useTime",
    formatter: ({ isReturn, lendTime, returnTime }) => {
      // 未归还0:当前时间-借出时间 0
      // 己归还1: 归还时间 - 借出时间 1
      return diffDate(lendTime, Number(isReturn) ? returnTime : null);
    },
    width: 180
  }
];

const initData = async (needInit = true) => {
  loading.value = true;
  if (needInit) {
    pagination.currentPage = 1;
  }
  const params = {
    pageNum: pagination.currentPage,
    pageSize: pagination.pageSize,
    ...getQueryParam()
  } as any;

  await listByUserApi(params).then(res => {
    tableData.value = [...res.rows];
    pagination.total = Number(res.total);
  });
  loading.value = false;
};
initData();
</script>
